<template>
  <div class="project">
    <div class="v-title">
      <span>卖家中心</span>
    </div>

    <a-table
      style="margin-top: 20px;"
      :columns="columns"
      :bordered="false"
      :data-source="list"
      :pagination="pagination"
      rowKey="ID"
      :loading="loading"
    >
      <div slot="project" slot-scope="text, record">
        {{ record.project.proName }}
      </div>
      <div slot="CreatedAt" slot-scope="text">
        {{ format(text) }}
      </div>

      <div slot="seller_user" slot-scope="text, record">
        {{ record.seller_user.name }}
      </div>

      <div slot="status" slot-scope="text">
        {{ text | status }}
      </div>

      <div slot="action" slot-scope="text, record">
        <a style="margin-left: 12px;" @click="edit(record)">
          查看
        </a>
      </div>
    </a-table>
  </div>
</template>

<script>
import dayjs from "dayjs";
import storage from "@/utils/storage";
import { getOrders, updateGoods, deleteGoods } from "@/api/account";
import { mapGetters } from "vuex";
const columns = [
  {
    title: "平台采购单编号",
    dataIndex: "userSn",
    scopedSlots: { customRender: "userSn" }
  },
  {
    title: "项目名称",
    dataIndex: "project",
    scopedSlots: { customRender: "project" },
    align: "center"
  },
  {
    title: "供应商",
    dataIndex: "seller_user",
    scopedSlots: { customRender: "seller_user" },
    align: "center"
  },
  {
    title: "采购清单名称",
    dataIndex: "name",
    scopedSlots: { customRender: "name" },
    align: "center"
  },
  {
    title: "发布时间",
    dataIndex: "CreatedAt",
    scopedSlots: { customRender: "CreatedAt" },
    align: "center"
  },
  {
    title: "审核状态",
    dataIndex: "status",
    scopedSlots: { customRender: "status" },
    align: "center"
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" },
    align: "center"
  }
];
export default {
  data() {
    return {
      columns,
      list: [],
      pagination: {
        total: 0,
        showTotal: total => `共${total}条`,
        pageSize: 20,
        onChange: page => {
          this.query.page = page;
        }
      },
      loading: false,
      query: {
        userId: undefined,
        status: undefined
      },
      statusOptions: [
        {
          name: "待审核",
          value: 1
        },
        {
          name: "审核驳回",
          value: 2
        },
        {
          name: "审核通过",
          value: 3
        },
        {
          name: "全部",
          value: undefined
        }
      ]
    };
  },
  computed: {
    ...mapGetters(["account"])
  },
  mounted() {
    this.query.sellerId = this.account.ID;
    this.getOrders();
  },
  filters: {
    status(val) {
      const statusOptions = [
        {
          value: 1,
          label: "待审核"
        },
        {
          value: 2,
          label: "驳回"
        },
        {
          value: 3,
          label: "待报价，双方上传合同"
        },
        {
          value: 4,
          label: "待合同审核"
        },
        {
          value: 5,
          label: "待平台上传付款凭证"
        },
        {
          value: 6,
          label: "双方上传收发货凭证"
        },
        {
          value: 7,
          label: "待平台收发货凭证审核"
        },
        {
          value: 8,
          label: "订单完成"
        }
      ];

      for (const item of statusOptions) {
        if (item.value == val) {
          return item.label;
        }
      }

      return "";
    }
  },
  methods: {
    async getOrders() {
      this.loading = true;
      const res = await getOrders(this.query);
      this.loading = false;
      this.list = res.data.list;
    },
    format(time) {
      return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
    },
    edit(item) {
      storage.setItem("ORDERS_ITEM", item);
      this.$router.push({
        path: "/user-center/orders-edit",
        query: {
          id: item.ID,
          type: "seller"
        }
      });
    },
    async handleTopChange(item) {
      await updateGoods(item);
      this.getOrders();
    },
    async deleteGoods(item) {
      await deleteGoods(item);
      this.getOrders();
      this.$message.info("删除成功");
    }
  }
};
</script>

<style lang="less" scoped>
.project {
  background: @white;
  padding: 20px 40px 20px 20px;

  .v-title {
    display: flex;
    justify-content: space-between;

    a {
      font-size: 16px;
    }
  }
}
</style>
